<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            font-size: 35px;
            color: red;
            border: brown;
        }
    </style>
</head>

<body>
    <div class="box">
        this is a div
        <p>
        <ul>
            <li>测试2</li>
            <li>测试</li>
            <li>测试</li>
        </ul>
        </p>
    </div>
    <script>
        let div = document.querySelector('.box');
        let li = document.querySelector('ul li');//返回li的第一个元素
        console.log(li);
        let lis = document.querySelectorAll('ul li');//返回ul里所有li集合
        console.log(lis);
        let box = document.querySelector('.box')//把box选择器给box
        box.style.color = 'yellow';
    </script>
</body>

</html>